<template>
  <div class="dashboard-container">
    <el-card class="welcome-card">
      <template #header>
        <div class="card-header">
          <span>欢迎使用量化交易可视化系统</span>
        </div>
      </template>
      <div class="welcome-content">
        <p>实时监控您的交易账户和策略表现</p>
      </div>
    </el-card>

    <div class="dashboard-stats">
      <el-card class="stat-card">
        <div class="stat-item">
          <div class="stat-label">总资产</div>
          <div class="stat-value">{{ totalAssets }}</div>
        </div>
      </el-card>
      <el-card class="stat-card">
        <div class="stat-item">
          <div class="stat-label">24h收益</div>
          <div class="stat-value">{{ dailyProfit }}</div>
        </div>
      </el-card>
      <el-card class="stat-card">
        <div class="stat-item">
          <div class="stat-label">持仓数量</div>
          <div class="stat-value">{{ positionCount }}</div>
        </div>
      </el-card>
    </div>

    <div class="dashboard-charts">
      <el-card class="chart-card">
        <template #header>
          <div class="card-header">
            <span>账户总资产变化</span>
          </div>
        </template>
        <div ref="assetsChart" class="chart-container"></div>
      </el-card>
      <el-card class="chart-card">
        <template #header>
          <div class="card-header">
            <span>持仓比例</span>
          </div>
        </template>
        <div ref="positionChart" class="chart-container"></div>
      </el-card>
    </div>

    <div class="dashboard-quick-actions">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>快捷操作</span>
          </div>
        </template>
        <div class="quick-actions-buttons">
          <el-button type="primary" @click="goToStrategyTrading">策略交易</el-button>
          <el-button type="success" @click="goToStrategyBacktest">策略回测</el-button>
          <el-button type="info" @click="goToKline">实时K线</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import * as echarts from 'echarts';
import { ElMessage } from 'element-plus';

const router = useRouter();
const totalAssets = ref('¥0.00');
const dailyProfit = ref('¥0.00 (0.00%)');
const positionCount = ref(0);
const assetsChart = ref(null);
const positionChart = ref(null);

// 模拟数据
const mockAssetData = {
  dates: ['2023-08-01', '2023-08-02', '2023-08-03', '2023-08-04', '2023-08-05', '2023-08-06', '2023-08-07'],
  values: [10000, 10200, 9800, 10500, 11000, 10800, 11200]
};

const mockPositionData = [
  { name: 'BTC', value: 40 },
  { name: 'ETH', value: 30 },
  { name: '其他', value: 30 }
];

onMounted(() => {
  // 初始化图表
  initAssetsChart();
  initPositionChart();
  // 模拟获取账户数据
  fetchAccountData();
});

function initAssetsChart() {
  const chart = echarts.init(assetsChart.value);
  const option = {
    title: {
      text: '总资产趋势',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: mockAssetData.dates
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: mockAssetData.values,
      type: 'line',
      smooth: true
    }]
  };
  chart.setOption(option);
  window.addEventListener('resize', () => chart.resize());
}

function initPositionChart() {
  const chart = echarts.init(positionChart.value);
  const option = {
    title: {
      text: '持仓分布',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    series: [{
      name: '持仓比例',
      type: 'pie',
      radius: '60%',
      data: mockPositionData,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  };
  chart.setOption(option);
  window.addEventListener('resize', () => chart.resize());
}

function fetchAccountData() {
  // 模拟API请求
  setTimeout(() => {
    totalAssets.value = '¥11,200.00';
    dailyProfit.value = '¥400.00 (3.70%)';
    positionCount.value = 2;
  }, 500);
}

function goToStrategyTrading() {
  router.push('/trade');
}

function goToStrategyBacktest() {
  router.push('/backtest');
}

function goToKline() {
  router.push('/kline');
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.welcome-card {
  margin-bottom: 20px;
}

.dashboard-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  flex: 1;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}

.stat-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 10px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #1f2329;
}

.dashboard-charts {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.chart-card {
  flex: 1;
}

.chart-container {
  width: 100%;
  height: 300px;
}

.quick-actions-buttons {
  display: flex;
  gap: 10px;
  padding: 10px 0;
}
</style>